<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="Shortcut Icon" type="image/x-icon" href="../icons/32.png">
  <title data-message="OP_title" >Aria2 Integration Options</title>
  <style>
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul ul {
      list-style: none;
      margin: 0;
      padding: 0;
      border: 0;
    }

    #cssmenu ul {
      position: relative;
      z-index: 597;
      float: left;
    }

    #cssmenu ul li {
      float: left;
      min-height: 1px;
      line-height: 1em;
      vertical-align: middle;
    }

    #cssmenu ul li.hover,
    #cssmenu ul li:hover {
      position: relative;
      z-index: 599;
      cursor: default;
    }

    #cssmenu ul ul {
      margin-top: 1px;
      visibility: hidden;
      position: absolute;
      top: 1px;
      left: 99%;
      z-index: 598;
      width: 100%;
    }

    #cssmenu ul ul li {
      float: none;
    }

    #cssmenu ul ul ul {
      top: 1px;
      left: 99%;
    }

    #cssmenu ul li:hover>ul {
      visibility: visible;
    }

    #cssmenu ul li {
      float: none;
    }

    #cssmenu ul ul li {
      font-weight: normal;
    }

    /* Custom CSS Styles */

    #cssmenu {
      font-size: 18px;
      width: 200px;
    }

    #cssmenu ul a,
    #cssmenu ul a:link,
    #cssmenu ul a:visited {
      display: block;
      color: #848889;
      text-decoration: none;
      font-weight: 300;
    }

    #cssmenu>ul {
      float: none;
    }

    #cssmenu ul {
      background: #fff;
    }

    #cssmenu>ul>li {
      border-left: 3px solid #d7d8da;
    }

    #cssmenu>ul>li>a {
      padding: 10px 20px;
    }

    #cssmenu>ul>li:hover {
      border-left: 3px solid rgb(44, 173, 255);
    }

    #cssmenu>ul>.active {
      border-left: 3px solid rgb(44, 173, 255);
    }

    #cssmenu ul li:hover>a {
      color: rgb(44, 173, 255);
    }

    #cssmenu ul .active>a {
      color: rgb(44, 173, 255);
    }

    #cssmenu>ul>li:hover {
      background: #f6f6f6;
    }

    /* Sub Menu */

    #cssmenu ul ul a:link,
    #cssmenu ul ul a:visited {
      font-weight: 400;
      font-size: 14px;
    }

    #cssmenu ul ul {
      width: 180px;
      background: none;
      border-left: 20px solid transparent;
    }

    #cssmenu ul ul a {
      padding: 8px 0;
      border-bottom: 1px solid #eeeeee;
    }

    #cssmenu ul ul li {
      padding: 0 20px;
      background: #fff;
    }

    #cssmenu ul ul li:last-child {
      border-bottom: 3px solid #d7d8da;
      padding-bottom: 10px;
    }

    #cssmenu ul ul li:first-child {
      padding-top: 10px;
    }

    #cssmenu ul ul li:last-child>a {
      border-bottom: none;
    }

    #cssmenu ul ul li:first-child:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: -20px;
      top: 13px;
      border-left: 10px solid transparent;
      border-right: 10px solid #fff;
      border-bottom: 10px solid transparent;
      border-top: 10px solid transparent;
    }

    h1 {
      padding: 0 0 13px 0;
    }

    h1::after {
      background-color: #eee;
      content: ' ';
      display: block;
      height: 1px;
      position: relative;
      top: 13px;
    }

    #cssmenu::before {
      background-color: #eee;
      content: ' ';
      display: block;
      width: 1px;
      height: 500px;
      position: absolute;
      top: 0px;
      left: 220px;
    }

    body {
      padding: 21px;
      background: #f9f9fa;
      overflow: hidden;
    }

    .wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .left {
      float: left;
      height: 100%;
    }

    .right {
      float: right;
      margin: 0px;
      padding: 0px;
      width: calc(100% - 250px);
      height: calc(100vh - 200px);
    }
  </style>
</head>

<body>
  <h1 data-message="OP_title" id="head">Aria2 Integration Options</h1>
  <div class="wrapper">
    <div class="left">
      <div id="cssmenu">
        <ul>
          <li id="general" class="active">
            <a data-message="OP_general" href="#general">General</a>
          </li>
          <li id="rpc">
            <a data-message="OP_rpcServer" href="#">RPC Servers</a>
            <ul>
              <li>
                <a data-message="OP_rpcDefault" href="#rpc">Default Server</a>
              </li>
              <li>
                <a data-message="OP_rpc2" href="#rpc2">RPC Server 2</a>
              </li>
              <li>
                <a data-message="OP_rpc3" href="#rpc3">RPC Server 3</a>
              </li>
            </ul>
          </li>
          <li id="exception">
            <a data-message="OP_exception" href="#exception">Exceptions</a>
          </li>
          <li id="about">
            <a data-message="OP_about" href="#about">About</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <iframe class="iframe" style="width: 100%; height: 100%" src="general.html" frameborder="0"></iframe>
    </div>
  </div>
  <script src="/config.js"></script>
  <script src="menu.js"></script>

</body>

</html>